<template>
  <div class="card-panel-icon-wrapper">
    <div class="left" :class="name">{{ describe }}</div>
    <div :class="name==='date'?'prices bg-other':'prices'">
      <div class="box-number" :style="{'color':fillStyle}">{{ data |yuanToTenThousand }}</div>
      <div class="box-dec" :style="{'color':fillStyle}">本{{ describe }}总保费</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fillStyle: {
      type: String,
      default: '#29A5FF'
    },
    name: {
      type: String,
      default: 'date'
    },
    data: {
      type: Number,
      default: 0
    },
    describe: {
      type: String,
      default: ''
    }
  },
  mounted() {
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
  .card-panel-icon-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
    transition: all 0.38s ease-out;
    border-radius: 6px;
    .left{
      width: 75px;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #fff;
      background: url('./images/green.png') no-repeat;
      background-size: contain;
    }
    .date{
      background: url('./images/yellow.png') no-repeat;
      background-size: contain;
    }
    .prices{
      width: calc(100% - 40px);
      height: 74px;
      top: 0;
      background-image: linear-gradient(90deg, rgba(90, 176, 239,0.36) 0%, rgba(255, 255, 255,0.36) 100%);
      position: absolute;
      left: 36px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 12px 0 12px 49px;
      .box-number{
        font-size: 30px;
        color: #29A5FF;
        font-weight: 600;
      }
      .col-other{
        color: #F58E44;
      }
      .box-dec{
        font-size: 14px;
        color: #fff;
      }
    }
    .bg-other{
      width: calc(100% - 40px);
      background: linear-gradient(90deg, rgba(245, 142, 68,0.19) 0%, rgba(255, 255, 255, 0.19) 100%);
    }
    .left{
      position: absolute;
      box-shadow: -4px 4px -4px rgba(0, 0, 0, .05);
      z-index: 1;
    }
  }
</style>
